<template>
    <div id="order-details">
        <header>
            <h2 class="f18 pt20" v-if="statusOrder.deliverStatus === '已完成'">订单配送{{statusOrder.deliverStatus}}</h2>
            <h2 class="f18 pt20" v-else-if="statusOrder.deliverStatus === '派送中'">正在{{statusOrder.deliverStatus}}</h2>
          <h2 class="f18 pt20" v-else>等待{{statusOrder.deliverStatus}}</h2>
            <p class="f12">剩余23小时15分自动关闭</p>
        </header>
        <main>
            <header>
                <section>
                    <h1 class="tc f16" style="color:#FF5001;">{{statusOrder.orderId}}</h1>
                    <p class="tc f15" style="color: #9D9C9C;">下单时间: 2018-10-09 09:45:36 共{{goods.goodMounts}}件商品</p>
                </section>
            </header>
            <div>
                <span style="border-radius: 0 5px 5px 0;"></span>
                <p></p>
                <span style="border-radius: 5px 0 0 5px;"></span>
            </div>
            <dl>
                <dt>
                    <div>
                        <aside style="border-right: 1px solid #ececec">
                          <span class="iconfont f18" style="color: #22B14A; line-height: 21px;">&#xe609;</span>
                          <p class="f12">导航</p>
                        </aside>
                        <aside>
                          <span class="f14" style="color: #FEAB2B;">{{statusOrder.deliverDistance}}KM</span>
                          <p class="f12">配送距离</p>
                        </aside>
                    </div>
                    <main>
                        <i class="iconfont">&#xe651;</i>
                        <section class="pl10 pt15 pb15">
                          <p class="f16" style="color: #646464">{{statusOrder.deliverStoreName}}</p>
                          <p class="f12 pt5" style="color: #898989">{{statusOrder.deliverStoreAddr}}</p>
                        </section>
                    </main>
                </dt>
                <dd>
                  <ul class="pl13-pt13">
                    <li v-for="(good, item) in goods" :key="good.index" v-if="item < showGoods">
                      <img :src="good.imgs"/>
                      <section class="pl10 tl">
                        <h1>{{good.nam}}</h1>
                        <p>{{good.selectGuige}}</p>
                      </section>
                      <section class="tr" style="flex: 1;">
                        <h1><span>￥</span>{{good.originalprice}}</h1>
                        <p><span>x</span>{{good.counts}}</p>
                      </section>
                    </li>
                  </ul>
                </dd>
            </dl>
            <aside @click="showMore">
                <i class="iconfont">{{text}}</i>
            </aside>
            <section class="cell-list pl13-pt13">
              <div class="flex align-center h50">
                <p class="flex1 f15">运费</p><p class="f14"><span class="f9">￥</span>15</p>
              </div>
              <div class="flex align-center h50">
                <p class="flex1 f15">总计</p><p class="f14" style="color: #F95318"><span class="f9">￥</span>33.44</p>
              </div>
              <div class="flex align-center h50">
                <p class="flex1 f15">支付方式</p><p class="f14"><span class="iconfont f20" style= "color:#41B962; vertical-align: middle">&#xe66e;</span>微信支付</p>
              </div>
            </section>
            <section class="cell-list mt5" style="border-radius: 0 0 5px 5px;">
                <h2 class="f15 tc">备注</h2>
                <p class="f12" style="padding: 10px 20px;color: #A5A5A5;">请在2018年10月25日10:30-17:30时间段内配送商品便顺利验收商品。</p>
            </section>
        </main>
        <footer class="pl13-pt13 mt20 mb20">
            <p class="one order-button " v-if="statusOrder.deliverStatus === '已完成'" >配送完成</p>
            <p class="two order-button " v-else-if="statusOrder.deliverStatus === '派送中'">提交完成</p>
            <p class="two order-button " v-else>立即配送</p>
            <p class="order-button" style="margin: 0;">拨打电话</p>
        </footer>
    </div>
</template>

<script type="ECMAScript 6">
    import listGoods from '@/components/list-goods';
    let datas = require('../../../../../data');
    export default {
        name: 'my-order-details',
        components: {
            listGoods
        },
        data () {
            return {
                goods: datas.goods,
                statusOrder: '',
                showGoods: 3,
                isShow: false,
                text: ''
            };
        },
        onShow () {
          this.statusOrder =  JSON.parse(this.$root.$mp.query.id);
        },
        methods: {
            showMore () {
                this.isShow = !this.isShow;
                this.showGoods = this.isShow ? 3 : this.goods.length;
                this.text = this.isShow ? '' : '';
            },
            afterSale () {
                this.$router.push('/mine/myOrder/myOrderDetails/saleAfter');
            }
        }
    };
</script>

<style lang="stylus" scoped>
    #order-details
      &>header
       height 130px; background url("") no-repeat center; background-size 100% 100%; padding 0 13px; color #fff;
       &>section
        display flex; align-items center;
        p
         flex 1;
      main
        padding 0 13px 68px 13px; margin-top -13%;
        &>header
            min-height 80px; background #fff; border-radius 5px 5px 0 0;
            &>section
                padding-top 18px;
        &>div
            display flex; align-items center; height 10px; background #fff;
            &>span
                display inline-block; width 5px; height 10px; background #F3F4F6;
            &>p
                flex 1; height 1px;background #F3F4F6;
        dl
            background #fff;
            dt
                &>div
                    display flex; align-items center;padding-bottom 8px; border-bottom 1px solid #ececec;
                    &>aside
                        border-color #fff;
                &>main
                   display flex; align-items center;  margin 0; width auto;padding 0 13px; border-bottom 1px solid #ececec;
                   i
                      display inline-block; width 32px; height 30px; border 2px solid #FD9E27; border-radius 50%; color #FD9E27; text-align center; line-height 30px;
                   section
                        flex 1;
                        p
                          padding 0;
            dd
                ul
                    li
                        display flex; border-bottom 1px solid #E9E9E9; padding 10px 0;
                        img
                            width 50px;height 50px;
                        section
                            h1
                                font-size 14px;
                                span
                                    font-size 9px;
                            p
                                margin-top 8px; font-size 12px; color #A2A2A2;
                                span
                                    font-size 9px;
                    li:last-of-type
                        border-color #fff;
            dd:last-of-type
               border-bottom-color transparent;
        aside
          text-align center; display block; width 100%; height 40px; border-top 1px solid #E9E9E9; background #fff;
          i
            line-height 40px;
        &>section
            margin-top 5px; background #fff;
            &>div
              height 40px; border-bottom 1px solid #f2f2f2;
            &>div:last-of-type
              border-color transparent;
            h2
             margin 0 10px; height 40px; line-height 40px;font-size 15px;border-bottom 1px solid #E9E9E9;
      footer
        display flex; align-items center; position fixed; right 0; padding 0 13px; bottom 10px; width 93%; margin 0 auto;
    .order-button
      margin 0 10px 0 0; border-radius 0; color #fff; height 48px; line-height 48px;flex 1; border-color #41B962; background #41B962; text-align center;
    .order-button:last-of-style
      margin 0;
    .one
      background #DDDDDD; border-color #DDDDDD;
    .two
      background #FD9E27; border-color #FD9E27;
</style>
